<script setup lang="ts">
import LoReBox from '@/components/LoReBox.vue'
import { validator, emailRule, passRule, nameRule } from '@/utils/index'
import server from '@/utils/server';
import { svgrule } from '@/server/user'
import { ElMessage, type FormInstance } from 'element-plus';
import { onMounted, reactive, ref, } from 'vue';
import { useRouter } from 'vue-router';
import type { propsType } from '@/components/index'
import { AES_Encrypt } from '@/utils/corpto'
import LinkCom from '@/components/LinkCom.vue'
import BottomBox from '@/components/BottomBox.vue'
import {useUsererStore} from '@/stores/user'
const ruleFormRef = ref<FormInstance>()

const linkList: propsType = [
  {
    url: '/backPass',
    text: '找回密码'
  },
  {
    url: '/regins',
    text: '会员注册'
  },
  {
    url: '/',
    text: '网站首页'
  }
]
// 函数校验规则
const ruleConfig: any = {
  username: emailRule,
  password: passRule,
  realname: nameRule
}
let svgUrl = ref(svgrule) // 动态请求图形验证码
onMounted(() => {
  svgUrl.value = `${svgrule}?${new Date().getTime()}`
})
const ruleForm = reactive({
  username: '',
  password: '',
  code: ''
})
const myValidate = (rule: any, value: any, callback: any) => {
  return validator(rule, value, callback)(ruleConfig[rule.field]) // 根据键名获取对应规则匹配
}
const rules = reactive({
  username: [{ validator: myValidate, trigger: 'blur', message: '用户名错误' }],
  password: [{ validator: myValidate, trigger: 'blur' }],
  code: [{ required: true, trigger: 'blur' }],
})

// 登录
const userStore = useUsererStore()
const router = useRouter()
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      server.post('/api/user/login', {
        ...ruleForm,
        password: AES_Encrypt(ruleForm.password)
      }).then(res => {
        if (res.errno === 1) {
          ElMessage.error(res.message)
          svgUrl.value +='?' + new Date().getTime()
          return
        }
        // 存用户基本一些信息
        userStore.setUserInfo(res.data.userInfo)
        localStorage.setItem('realname.id', JSON.stringify(res.data.userInfo))
        ElMessage.success(res.message)
        router.push('/')
      })
    }
  })
}

</script>
    
<template>
  <LoReBox>
    <div class="flex flex-col items-center flex-1 h-full justify-center px-4 sm:px-0">
      <div class="flex rounded-lg shadow-lg w-full sm:w-3/4 lg:w-1/2 bg-white sm:mx-0">
        <div class="flex flex-col w-full md:w-1/2 p-4">
          <h1 class="text-4xl text-center font-thin">欢迎登录</h1>
          <el-form ref="ruleFormRef" label-position="top" :model="ruleForm" status-icon :rules="rules"
            label-width="120px" hideRequiredAsterisk class="demo-ruleForm">
            <el-form-item class=" my-7 " prop="username">
              <el-input v-model="ruleForm.username" autocomplete="off" placeholder="请输入邮箱" />
            </el-form-item>

            <el-form-item class=" my-7 " prop="password">
              <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" />
            </el-form-item>

            <el-form-item prop="code">
              <div class="flex w-full">
                <el-input class="w-9/12" v-model="ruleForm.code" autocomplete="off" placeholder="请输入图形验证码" />
                <img @click="() => svgUrl+='?' + new Date().getTime()" :src="svgUrl" alt="">
                <!-- <el-button :disabled="endtime < secound" @click="sendCode" class="w-1/4">{{endtime < secound ? `${endtime}秒后重试` :'发送验证码'}}</el-button> -->
              </div>
            </el-form-item>

            <el-form-item>
              <el-button class="w-full bg-blue-400" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
          </el-form>
          <div class=" flex justify-center items-end mx-4 ">
            <LinkCom :linkList="linkList"></LinkCom>
          </div>
        </div>
        <div class="hidden md:block md:w-1/2 rounded-r-lg">
          <img class="h-full" src="https://www.houdunren.com/images/login.jpeg" alt="">
        </div>
      </div>
    </div>
  </LoReBox>
  <BottomBox></BottomBox>
</template>

<style scoped>

</style>
